
<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="Title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main
        v-loading="submitLoading"
        :style="{ 'max-height': maxHeightDialog }"
        :element-loading-text="submitLoading ? '提交中...' : '加载中...'"
        class="container-main"
      >
        <el-form
          ref="monitorForm"
          size="small"
          label-position="right"
          :model="form"
          :rules="rules"
          label-width="33%"
        >
          <div>
            <div class="title">
              <span>填写信息</span>
            </div>
            <el-card
              class="card"
              shadow="never"
              style="background: #fafafa; min-height: 450px"
            >
              <div style="margin-left: -12px; margin-right: -12px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属部门">
                      <treeselect
                        v-model="form.deptGuid"
                        placeholder="选择所属部门"
                        :options="deptTreeDataList"
                        :default-expand-level="Infinity"
                        style="width: 100%"
                        @select="onDepSelect"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属网格">
                      <treeselect
                        v-model="form.gridMount"
                        placeholder="选择所属网格"
                        :options="gridTreeDataList"
                        :default-expand-level="Infinity"
                        style="width: 100%"
                        @select="onGridSelect"
                      >
                        <div slot="value-label" slot-scope="{ node }">
                          {{ node.raw.fullPathText }}
                        </div>
                      </treeselect>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所在位置" prop="cameraLocation">
                      <el-input
                        v-model="form.cameraLocation"
                        placeholder="请输入所在位置"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="通道号" prop="cameraChannl">
                      <el-input
                        v-model="form.cameraChannl"
                        placeholder="输入通道号"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="监控设备编码" prop="cameraCode">
                      <el-input
                        v-model="form.cameraCode"
                        placeholder="请输入监控设备编码"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="监控设备名称" prop="cameraName">
                      <el-input
                        v-model="form.cameraName"
                        placeholder="输入监控设备名称"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="监控设备品牌" prop="cameraBrand">
                      <el-select
                        v-model="form.cameraBrand"
                        popper-class="global-select"
                        placeholder="请选择监控设备品牌"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in cameraBrandData"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictValue"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="监控设备类型" prop="cameraType">
                      <el-select
                        v-model="form.cameraType"
                        popper-class="global-select"
                        placeholder="请选择监控设备类型"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in cameraTypeData"
                          :key="item.id"
                          :label="item.dictText"
                          :value="item.dictValue"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="rtsp流地址" prop="rtsp">
                      <el-input
                        v-model="form.rtsp"
                        placeholder="请输入rtsp流地址"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="http流地址" prop="streamUrl">
                      <el-input
                        v-model="form.streamUrl"
                        placeholder="输入http流地址"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="ip地址" prop="cameraIp">
                      <el-input
                        v-model="form.cameraIp"
                        placeholder="请输入ip地址"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-form>
      </el-main>

      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px; margin-right: 10px"
          @click="toClose"
        >
          取消
        </el-button>
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit"
        >
          {{ isType === 1 ? '提交' : '修改' }}
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import dataFormMixins from '@/mixins/data-form-mixins'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { validIPAddr } from '@/utils/my-validate'
import systemManageApi from '@/api/system-manage'
import deviceManageApi from '@/api/device-manage'
export default {
  components: {
    Treeselect,
  },
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    isType: {
      type: Number,
      default: 1,
    },
    cameraBrandData: {
      type: Array,
      default: undefined,
    },
    deptTreeDataList: {
      type: Array,
      default: undefined,
    },
    params: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      submitLoading: false,
      cameraTypeData: [],
      gridTreeDataList: [],
      form: {
        id: '',
        cameraName: null,
        cameraBrand: '',
        cameraLocation: '',
        rtsp: '',
        floorId: '',
        cameraChannl: '',
        cameraType: '',
        cameraCode: '',
        cameraIp: '',
        streamUrl: '',
        deptGuid: '',
        gridMount: '',
      },
      rules: {
        // 摄像头名称
        cameraName: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 50, message: '最大不能超过50个字符', trigger: 'blur' },
        ],
        streamUrl: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value != '' && !this.checkHttpUrl(value)) {
                callback('格式不正确,请重新输入')
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        deptGuid: [{ required: true, message: '不能为空', trigger: 'blur' }],
        gridMount: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // rtsp: [
        //   {
        //     validator: (rule, value, callback) => {
        //       if (value != '' && !this.checkRtspUrl(value)) {
        //         callback('格式不正确,请重新输入')
        //       } else {
        //         callback()
        //       }
        //     }, trigger: 'blur'
        //   }
        // ],
        floorId: [
          { required: true, message: '请选择关联楼层', trigger: 'blur' },
        ],
        cameraChannl: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    Title() {
      return this.isType === 1
        ? '监控设备 ＞新增'
        : this.isType === 2
        ? '监控设备 ＞修改'
        : ''
    },
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    if (this.params != null) {
      this.form = { ...this.params }
    }

    this.getCameraType()
    this.getGridTreeDataList()
  },
  methods: {
    getGridTreeDataList() {
      deviceManageApi
        .getGridTree()
        .then((ret) => {
          this.gridTreeDataList = ret.data.data.rows
        })
        .catch(() => {
          this.gridTreeDataList = []
        })
    },
    onGridSelect(node) {
      // console.log('node：',node)
      // this.form.gridMountFullPath = node.fullPath
      this.form.gridName = node.fullPathText ? node.fullPathText : ''
    },
    onDepSelect(node) {
      this.form.deptName = node.label
    },
    checkHttpUrl(str) {
      const reg =
        /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-\(\)]*[\w@?^=%&/~+#-\(\)])?$/
      return reg.test(str)
    },
    checkRtspUrl(str) {
      const reg =
        /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      const reg1 =
        /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/
      const reg2 =
        /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//
      return reg.test(str) || reg1.test(str) || reg2.test(str)
    },
    getCameraType() {
      const data = {
        fieldName: 'camera_type',
        tableName: 't_equipment_camera',
      }
      deviceManageApi.getDictValueAttr(data).then((r) => {
        this.cameraTypeData = r.data.dictValue
      })
    },
    toClose() {
      this.$emit('close')
    },
    toSubmit() {
      this.$refs['monitorForm'].validate((err, values) => {
        if (err) {
          try {
            this.loading = true
            const params = { ...this.form }
            // let lastSelect = 0
            // if (this.form.floorId.length != undefined) {
            //   lastSelect = this.form.floorId[this.form.floorId.length - 1]
            // } else {
            //   lastSelect = this.form.floorId
            // }
            // params.floorId = lastSelect
            if (params.cameraIp &&params.cameraIp != '') {
              if (!validIPAddr(params.cameraIp)) {
                this.$message({
                  message: 'ip地址输入的值不正确，请重新输入',
                  type: 'warning',
                  duration: 4000,
                })
                return
              }
            }

            const url = 'console/equipmentCamera'
            let message
            if (this.isType === 1) {
              message = '新增摄像头成功！'
            } else if (this.isType === 2) {
              message = '修改摄像头成功！'
              deviceManageApi
                .updateEquipmentCamera({
                  ...params,
                })
                .then(() => {
                  this.$message.success(message)
                  this.toClose()
                })
                .catch(() => {
                  this.loading = false
                })
              return false
            }
            deviceManageApi
              .addEquipmentCamera({
                ...params,
              })
              .then(() => {
                this.$message.success(message)
                this.toClose()
              })
              .catch(() => {
                this.loading = false
              })
          } catch (error) {
            this.$message.error(error)
          }
        }
      })
    },
  },
}
</script>

<style lang='scss' scoped>
@import '../../../../../styles/part-custom';
</style>
